<template>
  <div class="loginContainer">
    <el-container class="container">
      <el-row type="flex" justify="center" align="middle" class="main">
        <div class="form-wrapper">
          <el-row type="flex" justify="center" class="tabs">
            <span
              :class="{ active: index == currentTab }"
              v-for="(item, index) in ['登录', '注册']"
              :key="index"
              @click="handleChangeTab(index)"
            >
              {{ item }}
            </span>
          </el-row>
          <LoginForm v-if="currentTab == 0" />
          <RegisterForm v-if="currentTab == 1" @ToLogin="ToLogin" />
        </div>
      </el-row>
    </el-container>
  </div>
</template>

<script>
// 导入登录与注册组件
import LoginForm from "@/components/user/LoginForm";
import RegisterForm from "@/components/user/RegisterForm";
export default {
  data() {
    return {
      currentTab: 0,
    };
  },
  components: {
    LoginForm,
    RegisterForm,
  },
  methods: {
    handleChangeTab(index) {
      // 将点击登录还是注册的下标存储到data的currentTab
      this.currentTab = index;
    },
    ToLogin() {
      //由注册切换登录页面
      this.currentTab = 0;
    },
  },
};
</script>

<style scoped lang="less">
.loginContainer {
  .container {
    background: url(http://157.122.54.189:9095/assets/images/th03.jfif) center 0;
    height: 700px;
    min-width: 1000px;

    .main {
      width: 1000px;
      height: 100%;
      margin: 0 auto;
      position: relative;

      .form-wrapper {
        width: 400px;
        margin: 0 auto;
        background: #fff;
        box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
        overflow: hidden;

        .tabs {
          span {
            display: block;
            width: 50%;
            height: 50px;
            box-sizing: border-box;
            border-top: 2px #eee solid;
            background: #eee;
            line-height: 48px;
            text-align: center;
            cursor: pointer;
            color: #666;

            &.active {
              color: orange;
              border-top-color: orange;
              background: #fff;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>
